import React from 'react';
import { Row, Col, Card, Typography } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Pie from '@/pages/Index/pie';
import Pieslice from '@/pages/Index/pieslice';
import Basiccolumn from './basiccolumn';
import { connect } from 'dva';

@connect(
  state => ({
    dataqueryTaskHistoryCount: state.taskHistory.dataqueryTaskHistoryCount,
    loadingqueryTaskHistoryCount: state.loading.effects['taskHistory/queryTaskHistoryCount'],
  }),
  dispatch => ({
    queryTaskHistoryCount: e => dispatch({ type: 'taskHistory/queryTaskHistoryCount', payload: e }),
  })
)
export default class Report extends React.Component {
  componentDidMount() {
    this.props.queryTaskHistoryCount({
      taskId: this.props.location.query.taskId,
      historyId: this.props.location.query.historyId,
    });
  }
  render() {
    return (
      <PageHeaderWrapper>
        <Row gutter={[0, 16]}>
          <Col span={6}>
            <Card bodyStyle={{ textAlign: 'center' }} bordered={false}>
              <Row>
                <Col>扫描数据库总数</Col>
                <Col>
                  <Typography.Title level={4} style={{ marginBottom: 0 }}>
                    {this.props.dataqueryTaskHistoryCount.dbCount}
                  </Typography.Title>
                </Col>
              </Row>
            </Card>
          </Col>
          <Col span={6}>
            <Card bodyStyle={{ textAlign: 'center' }} bordered={false}>
              <Row>
                <Col>扫描表总数</Col>
                <Col>
                  <Typography.Title level={4} style={{ marginBottom: 0 }}>
                  {this.props.dataqueryTaskHistoryCount.tableCount}
                  </Typography.Title>
                </Col>
              </Row>
            </Card>
          </Col>
          <Col span={6}>
            <Card bodyStyle={{ textAlign: 'center' }} bordered={false}>
              <Row>
                <Col>敏感信息表总数</Col>
                <Col>
                  <Typography.Title level={4} style={{ marginBottom: 0 }}>
                  {this.props.dataqueryTaskHistoryCount.columnLeveCount}
                  </Typography.Title>
                </Col>
              </Row>
            </Card>
          </Col>
          <Col span={6}>
            <Card bodyStyle={{ textAlign: 'center' }} bordered={false}>
              <Row>
                <Col>数据标签总数</Col>
                <Col>
                  <Typography.Title level={4} style={{ marginBottom: 0 }}>
                  {this.props.dataqueryTaskHistoryCount.columnSensLabelCount}
                  </Typography.Title>
                </Col>
              </Row>
            </Card>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <Card title="敏感信息表与不敏感信息表占比">
              <Pie data={this.props.dataqueryTaskHistoryCount.leList} />
            </Card>
          </Col>
          <Col span={12}>
            <Card title="敏感信息占比">
              <Pieslice data={this.props.dataqueryTaskHistoryCount.leTypeList} />
            </Card>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Card title="数据标签占比">
              <Basiccolumn data={this.props.dataqueryTaskHistoryCount.leWordeList} />
            </Card>
          </Col>
        </Row>
      </PageHeaderWrapper>
    );
  }
}
